import React from "react"
import style from "./index.module.css"
import { withRouter } from "react-router-dom"
class BottomNav extends React.Component {
        constructor(props) {
            super(props)
            this.state={
                nav : [{
                    name: "宝宝看",           
                    ico: "",
                    active: "active",
                    to:"/hear",
                },{
                    name: "宝宝听",
                    ico: "",
                    active: "active",
                    to:"/look",
                },{
                    name: "我的",
                    ico: "",
                    active: "active",
                    to:"/home",

                }],
               active :0
            }
        }
        componentDidMount(){
            // 在多层路由嵌套下仍能正确显示主路由
            let path = this.props.location.pathname
            let num =  this.state.nav.findIndex( item => item.to ==="/"+(path.split("/")[1]) ) 
            this.setState({active:num})
        }
        onis(i,item){
          this.setState({active:i})
          this.props.history.push(item.to)
        }
        render() {
            let {active} = this.state
            return (<div className={active===1? style.BottomNavAction: style.bottomNav}>
                { this.state.nav.map((item,i)=>{
                     return  <div key={i} onClick={()=> this.onis(i,item)} className={ this.state.active === i ? style.active:"" }> { item.name } </div>
                  })
                }
                </div>)
            }
         
        }
        export default  withRouter(BottomNav)